<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input class="myname" type="text" /> <button>添加</button>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <script>
        // 事件委托解决动态元素的事件绑定问题 ；
        // 需求 ： 1.点击添加的时候 需要在li里添加姓名 2. 点击姓名的时候 弹出姓名
        // 点击的时候弹出姓名 
        // var lis = document.querySelectorAll("li");
        // for (var i = 0; i < lis.length; i++) {
        //     lis[i].addEventListener("click", function () {
        //         alert(this.innerHTML);
        //     })
        // }
        
        // 通过事件委托绑定li的事件 ，把事件委托给ul。
        var ulEle = document.querySelector("ul");
        ulEle.onclick = function(e){
            var target = e.target ;
            if(target.nodeName==="LI"){
                alert(target.innerHTML);
            }
        }




        // 点击添加按钮的时候添加姓名
        var ele = document.querySelector(".myname");
        var btn = document.querySelector("button");
       
        btn.onclick = function () {
            var username = ele.value;
            // console.log(username);
            var liEle = document.createElement("li"); // 新添加的元素没有绑定事件
            liEle.innerHTML = username;
            ulEle.appendChild(liEle);
           

        }

        /*
        绑定事件 ： 1.添加之后  在循环绑定事件
                   2.创建li的时候绑定事件
                   3.事件委托 ，把事件不绑定在li上 ，绑定在ul上
        */
       



    </script>
</body>

</html>